<template>
  <view>
    <!-- Tab 切换按钮 -->
    <view class="tab-container">
      <view 
        class="tab-item" 
        :class="{'active': activeTab === 'business'}"
        @click="activeTab = 'business'"
      >
        业务统计
      </view>
      <view 
        class="tab-item" 
        :class="{'active': activeTab === 'service'}"
        @click="activeTab = 'service'"
      >
        服务统计
      </view>
    </view>

    <!-- 内容区域 -->
    <view v-if="activeTab === 'business'">
      <uni-card>
      <view class="filter-section">
        <picker
          @change="onTimeChange"
          :value="dateIndex"
          :range="dateOptions"
          class="picker-value"
        >
          <view class="picker-content">
            {{ dateOptions[dateIndex] || "请选择时间" }}
            <uni-icons type="down" size="20"></uni-icons>
          </view>
        </picker>
        <picker
          @change="onBranchChange"
          :value="branchIndex"
          :range="branchOptions"
          class="picker-value"
        >
          <view class="picker-content">
            {{ branchOptions[branchIndex] || "请选择网点" }}
            <uni-icons type="down" size="20"></uni-icons>
          </view>
        </picker>
      </view>
      <view class="two-card m30">
        <view class="card">
          <view class="card-value">¥{{ info.num1 || 0 }}</view>
          <view class="card-label">订单额</view>
        </view>
        <view class="card">
          <view class="card-value">{{ info.num2 || 0 }}</view>
          <view class="card-label">订单量</view>
        </view>
        <view class="card">
          <view class="card-value">¥{{ info.num3 || "-" }}</view>
          <view class="card-label">中转服务</view>
        </view>
        <view class="card">
          <view class="card-value">¥{{ info.num3 || 0 }}</view>
          <view class="card-label">交车服务</view>
        </view>
      </view>
      <card-header title="服务类型分布" />
      <view class="chart-container m30">
        <!-- 当没有数据时显示提示 -->
        <view v-if="chartData.series.length === 0" class="empty-tip">
          暂无数据，请选择时间和网点
        </view>
        <!-- 图表组件 -->
        <qiun-data-charts
          v-else
          type="mount"
          :opts="opts"
          :chartData="chartData"
        />
      </view>
    </uni-card>
    </view>

    <view v-if="activeTab === 'service'">
      <!-- 服务统计内容 -->
      <uni-card>
      </uni-card>
    </view>
  </view>
</template>

<script setup>
import qiunDataCharts from "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
import { ref, reactive, onMounted } from "vue";
import localData from '@/static/mock/statistics.json'; 
const activeTab =ref('business')
//时间选项
const dateOptions = ref(["今日", "本周", "本月", "本季度", "本年"]);
const dateIndex = ref(0);
// 时间选择事件
const onTimeChange = (e) => {
  dateIndex.value = e.detail.value;
  fetchData();
};

// 网点选项
const branchOptions = ref([
  "总行",
  "北京网点",
  "上海网点",
  "广州网点",
  "深圳网点",
]);
const branchIndex = ref(0);
const info = ref({});
//柱状图
const chartData = ref({series:[]});
const opts = {
  color: [
    "#1890FF",
    "#91CB74",
    "#FAC858",
    "#EE6666",
    "#73C0DE",
    "#3CA272",
    "#FC8452",
    "#9A60B4",
    "#ea7ccc",
  ],
  padding: [15, 15, 0, 5],
  enableScroll: false,
  legend: {},
  xAxis: {
    axisLine: false,
    disableGrid: true,
  },
  yAxis: {
    disabled: true,
    disableGrid: true,
    data: [
      {
        min: 0,
      },
    ],
  },
  extra: {
    mount: {
      type: "bar",
      widthRatio: 0.8,
    },
  },
};

// 网点选择事件
const onBranchChange = (e) => {
  branchIndex.value = e.detail.value;
  fetchData();
};

// 模拟获取数据
const fetchData = () => {
  const selectedBranch = branchOptions.value[branchIndex.value];
  const selectedTime = dateOptions.value[dateIndex.value];
  uni.showToast({
    title: "加载中",
    icon: "success",
    duration: 500,
  });
  let res =localData
      info.value = res.total;
      const monthData = res.statistic[selectedBranch][selectedTime] || [];
      let data = [];
      let nameArr=["中转","交车","提车","揽收"]
      nameArr.forEach((item,index) => {
        data.push({
          name: item,
          value: monthData[index],
        });
      });
      // 更新图表数据
      let opdata = {
        series: [
          {
            data: data
          },
        ],
      };
      chartData.value = JSON.parse(JSON.stringify(opdata));
}

// 初始化加载
onMounted(() => {
  // 默认选择第一个时间和网点
  fetchData();
});
</script>

<style lang="scss" scoped>
.tab-container {
  display: flex;
  margin: 20rpx 0;
  border-bottom: 1px solid #eee;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  color: #666;
}

.tab-item.active {
  color: #2979ff;
  border-bottom: 2px solid #2979ff;
}

.filter-section {
  margin: 30rpx 0;
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
  .picker-value {
    flex: 1;
    border: 1px solid $uni-primary;
    border-radius: 6rpx;
    .picker-content {
      padding: 10rpx 20rpx;
      font-size: 28rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}

.chart-container {
  height: 500rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.empty-tip {
  height: 500rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
  font-size: 28rpx;
}
</style>